<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<form >
    <input hidden name="method" value="register">
    用户名<input name="username" id="username"><span id="errorMsg"></span>
    <br>
    密码<input name="password" type="password">
    <br>
</form>
<input type="submit" value="注册" id="submit">

<script>
    $(function () {

        $('#submit').click(function () {
            var username = 'asdfasdf';
            var password = 'asdfsadf';

            if(username && password){
                $.ajax('/uu',{
                    type:'POST',
                    data:{username:username,password:password},
                    dataType:'json',
                    success:function (result) {
                        if(result.succ){
                            $(location).attr('href', 'index.jsp');
                        }else{
                            // 注册失败
                        }
                    }
                })
            }
        });


        $('#errorMsg').slideUp()
        $('#username').blur(function () {
            // 失去焦点
            var username = $('#username').val();
            // 把username通过ajax 发送到后端
            // 检查用户名是否存在
            $.ajax('/uu',{
                type:"POST",
                dataType:"json",
                data:{
                    method:'checkUsername',
                    username:username
                },
                success:function (result) {
                    if(result.exist){
                        $('#errorMsg').text("用户名已存在(" + username + ")")
                            .slideDown();
                    } else {
                        $('#errorMsg').slideUp()
                    }
                }
            })

        })
    })
</script>
</body>
</html>